<template>
  <div class="search-tag">
    <a class="search-img">
      <img class="search-tag-img movieImg" :src="subject.img">
    </a>
    <div class="search-brief">
      <a class="title" v-html="subject.title" @click="goToDetail()"/>&nbsp;<span>{{subject.subtitle}}</span>
      <p class="disc">
        <span style="font-size: 14px;font-weight: bold">时间：</span>{{subject.year}}年 <br><span style="font-size: 14px;font-weight: bold">导演：</span>
        <span v-for="(dr,idx1) in subject.director" :key="idx1 + 1">
          {{dr}}&nbsp;
      </span><br><span style="font-size: 14px;font-weight: bold">演员：</span>
        <span v-for="(cast,idx2) in subject.stars" :key="-idx2">
          {{cast}} &nbsp;
        </span><br>
        <span class="introduce-class">{{subject.introduce}}</span>
      </p>
      <p class="rate">
        <el-rate
          v-model="subject.score"
          disabled
          text-color="#ff9900">
        </el-rate>
        <span class="rate-value">{{subject.score * 2}}</span>
      </p>
    </div>

  </div>
</template>

<script>
export default{
  props: {
    subject: {
      type: Object
    },
    mid: 0
  },
  methods: {
    goToDetail () {
      this.$store.commit('MID', {mid: this.subject.id})
      let h = JSON.parse(window.localStorage.getItem(this.$cookies.get('username') + 'history'))
      if (h === null) h = []
      h.push(this.subject)
      window.localStorage.setItem(this.$cookies.get('username') + 'history', JSON.stringify(h))
      this.$router.push({path: '/home/movieDetail', query: {mid: this.mid}})
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
@import '../../../style/color.less';
@import "../../../style/base";
.search-tag{
  padding: 20px;
  border-top: 1px dashed @line;
  margin: 0 auto;
  .search-img{
    width: 128px;
    height: 180px;
    overflow: hidden;
    display: inline-block;
    .search-tag-img{
      width: 100px;
    }
  }

  .search-brief{
    display: inline-block;
    vertical-align: top;
    margin-left: 40px;
    p{
      margin-bottom: 20px;
    }
    .title{
      color: #666699;
      font-size: 14px;
      span{
        font-size: 14px;
      }
    }
    .disc{
      width: 500px;
      .introduce-class{
        word-break: break-all;
        overflow:hidden; // 超出的文本隐藏
        text-overflow:ellipsis;
        display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical;  //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-line-clamp:2; // 结合上面两个属性，表示显示的行数。
      }
    }
    .rate{
      .el-rate{
        display: inline-block;
        .el-rate__icon{
          font-size: 14px;
        }
      }
      .rate-value{
        color: #ff9900
      }
    }
  }
  .function-class{
    display: inline-block;
  }
}
</style>
